<template>
  <div class="continer">

    <div class="search">
      <div class="input"><el-input @blur="card = false ; inWorld = false" @focus="card = true ;" 
        @input="search"
          label-width="140px" v-model="input" placeholder="Please input" /></div>
      <div class="menu">
         <el-dropdown split-button type="primary">
          {{ typeName }}
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item v-for="item in classNameList"
                @click="getType(item.id as unknown as number, item.className)">{{ item.className }}</el-dropdown-item>
              <el-dropdown-item @click="getType(0, '默认')">默认</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown></div>
      <div><el-button @click="find" :icon="Search" circle /></div>

      <div style="z-index: 9999;">
        <div v-show="card && inWorld || p" class="box-card">
          <div class="item" v-for="item in resList" :key="item.id" @click="go(item.id)">{{ item.bookName }}</div>
        </div>
      </div>
    </div>
    <div class="header">

      <div class="headerleft"></div>

      <div class="headerRight">
        <div>
          <el-dropdown>
            <el-button @click="toMy" type="primary">
               <el-icon><Avatar /></el-icon> <el-icon><arrow-down /></el-icon>
            </el-button>
            <template v-if="store.isLogin()" #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="store.logout()">退出登陆</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>

    </div>
    <!-- src="../assets/1.jpg" -->
    <div ref="box" class="main">
      <div style="margin: 0 auto;width: 1000px;">
        <el-carousel :interval="4000" type="card" height="200px">
          <el-carousel-item  >
            <h3 text="2xl" justify="center"><img style="width: 500px;"   src="../assets/1.jpg"  alt=""></h3>
          </el-carousel-item>
          <el-carousel-item  >
            <h3 text="2xl" justify="center"><img style="width: 500px;"   src="../assets/2.jpg"  alt=""></h3>
          </el-carousel-item>
          <el-carousel-item  >
            <h3 text="2xl" justify="center"><img style="width: 500px;"   src="../assets/3.jpg"  alt=""></h3>
          </el-carousel-item>
          <el-carousel-item  >
            <h3 text="2xl" justify="center"><img style="width: 500px;"   src="../assets/4.jpg"  alt=""></h3>
          </el-carousel-item>
          <el-carousel-item  >
            <h3 text="2xl" justify="center"><img style="width: 500px;"   src="../assets/5.jpg"  alt=""></h3>
          </el-carousel-item>
          <el-carousel-item  >
            <h3 text="2xl" justify="center"><img style="width: 500px;"   src="../assets/6.jpg"  alt=""></h3>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="in">

        <div class="mycard" v-for="item in bookList">

          <div class="imageC">
            <img :src="item.bookPic" class="myimage" />
          </div>

          <div class="title">书名：{{ item.bookName }}</div>
          <div>价格：{{ item.price }} <button @click="choice(item.id)">查看详细</button></div>
        </div>
      </div>
    </div>


  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, type VNodeRef } from 'vue'
import { getBookClass, getAllBooks, searchMsg, findhMsg } from '@/api/Book';
import { useRouter } from 'vue-router';
import { useCounterStore } from '@/stores/counter';
import { ArrowDown } from '@element-plus/icons-vue'
import { Search } from '@element-plus/icons-vue'

const card = ref(false)
const inWorld = ref(false)
const p = ref(false)
const store = useCounterStore()
const router = useRouter()
const typeName = ref("默认")
const typeId = ref<number>(0)
const radio = ref(3)
const input = ref("")
const box = ref<HTMLElement>()

const bookList = ref<Array<bookShort>>()

const start = 0;
const end = 20;
const resList = ref<any>()

const imgList = ref([
"../assets/1.jpg",
"../assets/2.jpg",
"../assets/3.jpg",
"../assets/4.jpg",
"../assets/5.jpg",
"../assets/6.jpg",
])

const getType = (classId: number, className: string) => {
  typeName.value = className

  typeId.value = classId
}

const search = () => {
  p.value = true
  inWorld.value = true

  if (input.value !== '')
    searchMsg(typeId.value, input.value).then(res => {
      resList.value = res.data.data
    })
}

const find = () => {
  findhMsg(typeId.value, input.value).then(res => {
    bookList.value = res.data.data
  })
}
const go = (id: any) => {
  console.log(id);
  p.value = false
  router.push({ path: '/bookInfo', query: { id, refresh: 1 } })
}
const toMy = () => {
  router.push('/user/info')

}

const handleClick = () => {
  // eslint-disable-next-line no-alert
  alert('button click')
}

onMounted(async () => {

  var isLoading = false;
  var isEnd = false;


  const fun = async (e: Event) => {

    const height = box.value?.scrollHeight as number - 870
    const top = box.value!.scrollTop
    let r: Array<bookShort> = []

    if (top / height > 0.7 && !isLoading && !isEnd) {
      isLoading = true;
      const res = await getAllBooks(bookList.value?.length as number, bookList.value?.length as number + 10)
      console.log(res.data.data);
      isLoading = false;

      if (res.data.length === 0)
        isEnd = true

      r = res.data.data as Array<bookShort>

      if (!isLoading && !isEnd)
        bookList.value?.push(...r)

      if (r.length === 0) {
        await box.value?.removeEventListener('scroll', fun)
      }
    }
  }



  box.value?.addEventListener('scroll', await fun, { passive: true })

  document.addEventListener('click', (ev) => {
    if (ev!.target!.className !== 'item') {
      p.value = false
    }

  })

})


const radioChange = () => {
  console.log(radio.value);
}



type bookClass = {
  id: string,
  className: string
}

type bookShort = {
  id: number,
  bookName: string,
  price: number,
  bookPic: string
}

let classNameList = ref<Array<bookClass>>()

getBookClass().then(res => {
  console.log(res.data);
  classNameList.value = res.data.data
  console.log(classNameList.value);

})


getAllBooks(start, end).then(res => {
  bookList.value = res.data.data
  console.log(bookList);

})
const currentDate = ref(new Date())
const choice = (id: number) => {
  console.log(id);
  router.push({ path: '/bookInfo', query: { id: id, refresh: 1 } })
}



</script>

<style scoped >
.continer {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #e3e3e3;
}

.header {
  height: 100px;
  display: flex;
  justify-content: space-between;
}

.main {

  height: 100%;
  flex: 1;
  overflow: scroll;
}

.in {
  margin-top: 20px;
  display: flex;
  height: auto;
  margin-left: 10%;
  margin-right: 10%;
  background-color: #ffffff;
  flex-wrap: wrap;
  justify-content: center;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;

}





.mycard {
  height: 350px;
  width: 250px;
  margin: 27.3px;
  transition: all 0.3s;
  border-radius: 10px;
  background-color: #f5f1f1;
}

.mycard:hover {
  box-shadow: 10px 10px 5px rgba(128, 122, 122, 0.9);
  /*blur值为5px*/
}

.myimage {
  height: 100%;
}

.imageC {
  width: 90%;
  height: 80%;
  overflow: hidden;
  background-color: aqua;
  border-radius: 15px;
  margin: 0 auto;
}

.title {
  color: #333;
  font-size: 16px;
}



.headerRight {}

.headerleft {
  margin-top: 70px;
  margin-left: 10%;
}

.mid {
  position: absolute;
  margin-left: 45%;
  margin-top: 2%;
}

.search {
  position: absolute;
  height: 30px;
  width: 420px;

  margin-left: 35%;
  margin-top: 20px;
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
}

.el-input {
  width: 292px;
}

.box-card {
  width: 292px;
  background-color: #ffffff;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  z-index: 9999;
}

.item {

  cursor: pointer;
  height: 28px;
  background-color: aliceblue;
}

.item:hover {
  background-color: #b7b7b7;
}


.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}</style>